/**
* 机型
*/
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="jx">
							<template #label><vp-label zh="机型" en="Keyword" /></template>
							<el-input v-model="searchForm.jx" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="zt">
							<template #label><vp-label zh="状态" en="Status" /></template>
							<el-select v-model="searchForm.zt" placeholder="请选择" clearable>
								<el-option label="启用" value="10"></el-option>
								<el-option label="禁用" value="20"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="lx">
							<template #label><vp-label zh="类型" en="Status" /></template>
							<el-select v-model="searchForm.lx" placeholder="请选择" clearable>
								<el-option label="固定翼" value="10"></el-option>
								<el-option label="旋翼" value="20"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'qualitySafetyAbnormalList.add'" @click="handleAdd" />
		</template>
		<template #table>
			<vp-vxe-table id="baseDataModel" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="jx" title="机型 A/C Type" show-overflow width="200">
					<template #header><vp-label zh="机型" en="A/C Type" /></template>
				</vxe-column>
				<vxe-column field="zt" title="状态 " show-overflow width="140">
					<template #header><vp-label zh="状态" en="Status" /></template>
					<template #default="{ row }">
						<el-tag v-if="row.zt === 10" type="success">启用</el-tag>
						<el-tag v-else type="danger">禁用</el-tag>
					</template>
				</vxe-column>
				<vxe-column field="lx" title="类型" show-overflow width="140">
					<template #header><vp-label zh="类型" en="Type" /></template>
					<template #default="{ row }">
						<el-tag v-if="row.lx === 10" type="success">固定翼</el-tag>
						<el-tag v-else type="danger">旋翼</el-tag>
					</template>
				</vxe-column>
				<vxe-column field="xh" title="型号" show-overflow width="140">
					<template #header><vp-label zh="型号" en="A/C Type" /></template>
				</vxe-column>
				<vxe-column field="zzjx" title="执照机型" show-overflow>
					<template #header><vp-label zh="执照机型" en="A/C Type" /></template>
				</vxe-column>
				<vxe-column field="sccj" title="生产厂家" show-overflow>
					<template #header><vp-label zh="生产厂家" en="A/C Type" /></template>
				</vxe-column>
				<vxe-column field="whsj" title="维护时间 Edit Time" show-overflow>
					<template #header><vp-label zh="维护时间" en="Edit Time" /></template>
				</vxe-column>
				<vxe-column field="operation" title="操作 Operations" fixed="right" width="140">
					<template #header><vp-label-operations /></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit text v-auth="'basedataModel.edit'" @click="handleEdit(scope.row)" />
							<vp-btn text v-auth="'basedataModel.edit'" @click="handleUdpZt(scope.row)">
								<vp-label v-if="scope.row.zt == 10" zh="禁用" en="Disabled"></vp-label>
								<vp-label v-else zh="启用" en="Enabled"></vp-label>
							</vp-btn>
							<vp-btn-view text @click="handleView(scope.row.id)" />
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<EditAcmodel ref="editAcmodelRef" @formSubmited="handleFormSubmited"></EditAcmodel>
	</vp-main-page>
</template>
<script setup lang="ts" name="basicDataAcModel">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import EditAcmodel from './component/EditAcmodel.vue';
import { markTextColor } from '/@/utils/toolsValidate';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'

const searchForm = reactive({
	zt: "",
	lx: "",
	jx: "",
	allData: true
});


const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/basicData/acmodel/list', {
		params: {
			...searchForm,
		}
	}).then(res => {
		tableData.value = res?.data
	}).finally(() => {
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = () => {
	searchFormRef.value.resetFields();
}

onMounted(() => {
	loadDataList();
})

const editAcmodelRef = ref();
const tableRef = ref();

const handleAdd = () => {
	editAcmodelRef.value.handleOpen({
		type: 'add'
	});
}

const handleEdit = (row: any) => {
	editAcmodelRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

const handleFormSubmited = () => {
	loadDataList();
}

const handleView = (id: string) => {
	router.push({
		name: "viewBasedataModel",
		params: {
			id: id,
		},
	})
}

//修改状态
const handleUdpZt = (row: any) => {
	ElMessageBox.confirm(
		row.zt == 10 ? '此操作将永久禁用机型名称，是否继续?' : '此操作将永久启用机型名称，是否继续?',
		'提醒', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		let data = {
			id: row.id,
			zt: row.zt == 10 ? 20 : 10,
		}
		request.post('/basicData/acmodel/editZt', data).then(res => {
			ElMessage({
				type: 'success',
				message: '调整成功',
			})
			loadDataList();
		}).finally(() => {
			loading.value = false;
		})

	})

}


</script>